---
name: usePagination
route: /usePagination
menu: 'UI'
edit: false
sidebar: true
---
import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2CodeJsx from '!raw-loader!./demo/demo2.jsx';
import Demo2CodeTsx from '!raw-loader!./demo/demo2.tsx';

# usePagination

适用于常见的异步分页场景的 Hook。

## 代码演示

### 基本用法

<JackBox jsCode={Demo1CodeJsx} tsCode={Demo1CodeTsx} demoName='基本用法' description='简单的分页列表'>
  <Demo1 />
</JackBox>

### 合理利用 deps

<JackBox jsCode={Demo2CodeJsx} tsCode={Demo2CodeTsx} demoName='合理利用 deps' description='当 deps 变化时，会初始化到第一页'>
  <Demo2 />
</JackBox>

## API

```javascript
const result: ReturnValue<Item> = usePagination<Result, Item>(
  asyncFn: ({current, pageSize}) => Promise<Result>,
  options?: Options,
);

const result: ReturnValue<Item> = usePagination<Result, Item>(
  asyncFn: ({current, pageSize}) => Promise<Result>,
  deps?: any[],
  options?: Options,
);
```

### Result

| 参数                      | 说明                         | 类型                                      |
|---------------------------|------------------------------|-------------------------------------------|
| data                      | 数据                         | Item[]                                    |
| loading                   | 数据是否正在加载             | boolean                                   |
| pagination.current        | 当前页号                     | number                                    |
| pagination.pageSize       | 每页数据量                   | number                                    |
| pagination.total          | 数据总量                     | number                                    |
| pagination.totalPage      | 总页数                       | number                                    |
| pagination.onChange       | 同时修改 current 和 pageSize | (current: number, pageSize: number)=>void |
| pagination.changeCurrent  | 单独修改 current             | (current: number)=>void                   |
| pagination.changePageSize | 单独修改 pageSize            | (pageSize: number)=>void                  |
| refresh                   | 刷新当前数据                 | () => void                                |

### Params

| 参数    | 说明                                                    | 类型                           | 默认值 |
|---------|---------------------------------------------------------|--------------------------------|--------|
| asyncFn | 异步请求数据函数，函数参数为 current 和 pageSize        | ({current, pageSize})=>Promise | -      |
| deps    | 依赖数组，如果 deps 变化，会重置 current 并触发 asyncFn | any[]                          | []     |
| options | 可选配置项，见 Options                                  | -                              | -      |


### Options

| 参数            | 说明                                                                         | 类型                           | 默认值 |
|-----------------|------------------------------------------------------------------------------|--------------------------------|--------|
| defaultPageSize | 默认的每页数据量                                                             | number                         | 10     |
| formatResult    | 对 asyncFn 返回数据进行格式化，如果 asyncFn 返回数据符合要求，则不需要该参数 | (res: Result)=>({total, data}) | -      |